<template>
  <div class="myinfo">
    <van-form @submit="onSubmit">
      <div class="line" :key="item.id" v-for="item in data">
        <van-field
          :name="item.name"
          :label="item.title"
          :placeholder="item.placeHolder"
        ></van-field>
        <van-icon v-if="item.icon != ''" :name="item.icon" />
      </div>

      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          @submit="onSubmit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { getMyInfo } from '@/api/myinfo.js'
export default {
  name: '',
  data() {
    return {
      username: '',
      password: '',
      telenumber: '',
      realname: '',
      birth: '',
      loc: '',
      detailLoc: '',
      telePlace: '请输入手机号码',
      namePlace: '请输入您的真实姓名',
      data: null
    }
  },
  created() {
    getMyInfo().then(res => {
      this.data = res.data.data
      if (this.$route.params.tele) {
        this.data[0].placeHolder = this.$route.params.tele
      }
    })
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values)
      let temp = []
      let flag = false
      if (localStorage.getItem('selfInfo')) {
        temp = JSON.parse(localStorage.getItem('selfInfo'))
        for (let i = 0; i < temp.length; i++) {
          if (temp[i].telenumber === values.telenumber) {
            // 已经有个人资料则覆盖掉
            temp[i] = values
            flag = false
            break
          } else {
            flag = true
          }
        }
        if (flag === true) {
          // 没有个人资料则添加
          temp.push(values)
          localStorage.setItem('selfInfo', JSON.stringify(temp))
        }
      } else {
        temp.push(values)
        localStorage.setItem('selfInfo', JSON.stringify(temp))
      }
    }
  }
}
</script>

<style lang="less" scoped>
.myinfo {
  height: 100%;
  background-color: #ecf3ff;
}
.van-button {
  width: 100%;
}

.line {
  position: relative;
  width: 90%;
  margin: 0 auto;
  background: #fff;
  border-radius: 0.3rem;
}
.van-icon {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}
/deep/.van-cell {
  background-color: #fff;
  width: 90%;
  margin-bottom: 10px;
}
/deep/.van-field__label {
  color: #000;
}

/deep/.van-form {
  padding-top: 1rem;
}

/deep/.van-field__control {
  color: #666;
}
</style>
